<template>
	<view class="login-container">
		<view class="logo">
			<image src="/static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="title">博物馆小程序</view>
		
		<view class="login-form">
			<button class="login-btn wechat" open-type="getUserInfo" @getuserinfo="wxLogin">微信一键登录</button>
			
			<!-- 添加开关，控制是否使用微信的头像和昵称覆盖已有信息 
			<view class="switch-container">
				<text>使用默认微信头像和昵称</text>
				<switch :checked="useWxProfile" @change="onSwitchChange" color="#1aad19" />
			</view>-->
			
			<view class="divider">
				<text>或</text>
			</view>
			<button class="login-btn phone" @click="phoneLogin">手机号登录</button>
		</view>
	</view>
</template>

<script>
	import { userLogin, bindWechat } from '@/api/user.js';
	
	export default {
		data() {
			return {
				// 是否已有手机账号，需要绑定微信
				hasPhoneAccount: false,
				// 登录时获取的微信临时凭证
				wxLoginInfo: null,
				// 手机号 - 用于绑定微信
				phoneAccount: '',
				// 控制是否使用微信资料更新已有账号
				useWxProfile: false
			}
		},
		onLoad(options) {
			// 检查是否来自绑定页面
			if (options.bind && options.phone) {
				this.hasPhoneAccount = true;
				this.phoneAccount = options.phone;
				console.log('从绑定页面进入，手机号:', this.phoneAccount);
				
				// 如果传递了forceUpdate参数，设置useWxProfile
				if (options.forceUpdate !== undefined) {
					this.useWxProfile = options.forceUpdate === 'true';
				}
			} else {
				// 如果不是从绑定页面进入，从本地存储加载用户偏好设置
				const savedUseWxProfile = uni.getStorageSync('useWxProfile');
				if (savedUseWxProfile !== undefined && savedUseWxProfile !== '') {
					this.useWxProfile = savedUseWxProfile;
				}
			}
		},
		methods: {
			// 切换开关
			onSwitchChange(e) {
				this.useWxProfile = e.detail.value;
				// 保存设置到本地存储，便于下次使用
				uni.setStorageSync('useWxProfile', this.useWxProfile);
			},
		
			// 微信登录
			wxLogin(e) {
				if (e.detail.userInfo) {
					// 显示加载中
					uni.showLoading({
						title: '登录中...'
					});
					
					// 保存微信登录信息
					this.wxLoginInfo = {
						nickName: e.detail.userInfo.nickName,
						avatarUrl: e.detail.userInfo.avatarUrl
					};
					
					uni.login({
						provider: 'weixin',
						success: async (loginRes) => {
							// 获取用户信息
							const userInfo = e.detail.userInfo;
							const code = loginRes.code; // 作为openid的临时代替
							console.log(userInfo);
							console.log(loginRes);
							
							// 检查是否需要绑定手机号
							if (this.hasPhoneAccount) {
								this.bindWithPhone(code);
								return;
							}
							
							// 常规注册/登录
							try {
								console.log('微信登录，使用code:', code);
								
								// 重要：确保每次登录使用相同的参数，让后端能正确识别用户
								const res = await userLogin({
									openid: code, // 实际项目中会在后端通过code换取openid
									nickname: userInfo.nickName,
									avatar: userInfo.avatarUrl
								}, {
									// 根据用户选择决定是否强制更新资料
									forceUpdate: this.useWxProfile
								});
								
								if (res.code === 200 && res.data) {
									// 保存用户信息
									uni.setStorageSync('userInfo', res.data);
									uni.hideLoading();
									
									// 检查是否已绑定手机号
									if (!res.data.phone) {
										// 提示用户绑定手机号
										uni.showModal({
											title: '提示',
											content: '建议绑定手机号，以便账号安全',
											confirmText: '立即绑定',
											cancelText: '跳过',
											success: (modalRes) => {
												if (modalRes.confirm) {
													// 跳转到手机号绑定页面
													uni.navigateTo({
														url: `/pages/login/phone?mode=bind&userId=${res.data.id}`
													});
													return;
												}
												
												// 跳过绑定，返回上一页或首页
												this.navigateBack();
											}
										});
									} else {
										// 已绑定手机号，直接返回
										this.navigateBack();
									}
								} else {
									throw new Error(res.msg || '登录失败');
								}
							} catch (error) {
								uni.hideLoading();
								console.error('登录失败', error);
								uni.showToast({
									title: error.message || '登录失败，请重试',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							uni.hideLoading();
							console.error('获取微信登录凭证失败', err);
							uni.showToast({
								title: '微信登录失败，请重试',
								icon: 'none'
							});
						}
					});
				}
			},
			
			// 与已有手机号账号绑定
			async bindWithPhone(code) {
				if (!this.phoneAccount) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '账号绑定中...'
				});
				
				try {
					console.log('绑定微信账号，参数:', {
						openid: code,
						phone: this.phoneAccount,
						nickname: this.wxLoginInfo?.nickName,
						avatar: this.wxLoginInfo?.avatarUrl
					});
					
					const res = await bindWechat({
						openid: code,
						phone: this.phoneAccount,
						code: '000000', // 假设已验证过手机号
						nickname: this.wxLoginInfo?.nickName,
						avatar: this.wxLoginInfo?.avatarUrl,
						forceUpdate: this.useWxProfile // 增加forceUpdate参数
					});
					
					if (res.code === 200 && res.data) {
						uni.hideLoading();
						
						// 保存用户信息
						uni.setStorageSync('userInfo', res.data.user);
						
						uni.showToast({
							title: '账号绑定成功',
							icon: 'success'
						});
						
						// 返回上一页或首页
						setTimeout(() => {
							this.navigateBack();
						}, 1500);
					} else {
						throw new Error(res.msg || '绑定失败');
					}
				} catch (error) {
					uni.hideLoading();
					console.error('绑定失败', error);
					uni.showToast({
						title: error.message || '账号绑定失败',
						icon: 'none'
					});
				}
			},
			
			// 手机号登录
			phoneLogin() {
				uni.navigateTo({
					url: '/pages/login/phone'
				});
			},
			
			// 返回上一页或首页
			navigateBack() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		padding: 100rpx 50rpx;
		
		.logo {
			text-align: center;
			margin-bottom: 50rpx;
			
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
		
		.title {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 80rpx;
		}
		
		.login-form {
			.login-btn {
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 45rpx;
				font-size: 32rpx;
				
				&.wechat {
					background-color: #1aad19;
					color: #ffffff;
				}
				
				&.phone {
					background-color: #ffffff;
					color: #333333;
				}
			}
			
			.switch-container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #666;
			}
			
			.divider {
				position: relative;
				text-align: center;
				margin: 40rpx 0;
				
				&:before, &:after {
					content: '';
					position: absolute;
					top: 50%;
					width: 30%;
					height: 1px;
					background-color: #ddd;
				}
				
				&:before {
					left: 0;
				}
				
				&:after {
					right: 0;
				}
				
				text {
					display: inline-block;
					padding: 0 20rpx;
					background-color: #f8f8f8;
					color: #999;
					position: relative;
					z-index: 1;
				}
			}
		}
	}
</style> 